<template>
	<div class="login-container" :style="{ backgroundImage: `url(${currentImage})` }">
		<div class="slider">
			<div :class="active===1 ?'form':'form hidden'">

				<div v-if="ac" class="login-way">
					<div class="title">欢迎<b>回来</b></div>
					<div class="subtitle">登录你的账号</div>
					<div class="inputf">
						<input type="text" v-model="formlogin.username" placeholder="用户名" />
						<span class="label">用户名</span>
					</div>
					<div class="inputf">
						<input type="text" v-model="formlogin.x1" placeholder="密码" />
						<span class="label">密码</span>
					</div>
					<p @click="ac = false">验证码登录</p>
					<button @click="login">登录</button>
				</div>

				<div v-if="!ac" class="login-way">
					<div class="title">欢迎<b>回来</b></div>
					<div class="subtitle">登录你的账号</div>
					<div class="inputf">
						<input type="text" v-model="formlogin.x2" placeholder="邮箱" />
						<span class="label">邮箱</span>
					</div>
					<div class="inputf code">
						<input type="text" v-model="formlogin.password" placeholder="验证码" />
						<span class="label">验证码</span>
						<button @click="pianren()" :disabled="countdownSeconds > 0"
							:class="{ 'disabled-button': countdownSeconds > 0 }">
							{{ countdownSeconds > 0 ? `${countdownSeconds}s后重发` : '发送验证码' }}
						</button>
					</div>
					<p @click="ac = true">密码登录</p>
					<button @click="xia()">登录</button>
				</div>

			</div>
			<div :class="active===2 ?'form':'form hidden'">
				<div class="title">欢迎<b>开始</b></div>
				<div class="subtitle">创建你的账号</div>
				<div class="inputf">
					<input type="text" placeholder="用户名" />
					<span class="label">用户名</span>
				</div>
				<div class="inputf">
					<input type="email" placeholder="邮箱" />
					<span class="label">邮箱</span>
				</div>
				<div class="inputf">
					<input type="text" placeholder="密码" />
					<span class="label">密码</span>
				</div>
				<div class="inputf code">
					<input type="text" placeholder="验证码" />
					<span class="label">验证码</span>
					<button @click="pianren()" :disabled="countdownSeconds > 0"
						:class="{ 'disabled-button': countdownSeconds > 0 }">
						{{ countdownSeconds > 0 ? `${countdownSeconds}s后重发` : '发送验证码' }}
					</button>
				</div>
				<button @click="sign()">注册</button>
			</div>

			<div :class="active===1 ?'card':'card active'">
				<div class="head">
					<div class="name">摸摸<span>鱼</span></div>
				</div>
				<div class="desc">{{active===1? text.left:text.right}}</div>
				<div class="btn">
					{{active===1?'新用户 ? ':'已有账号 ? '}}
					<button @click="active=(active===1) ? 2 : 1">
						{{active===1?'去注册':'去登陆'}}
					</button>
				</div>
			</div>
		</div>
	</div>

</template>

<script setup>
	import {
		ref,
		reactive,
		onMounted,
		onUnmounted
	} from "vue";
	import axios from "@/api/apiaxios";
	import {
		useRouter
	} from 'vue-router';
	import imgUrl1 from '@/img/1.jpg';
	import imgUrl2 from '@/img/2.jpg';
	import imgUrl3 from '@/img/3.jpg';

	const router = useRouter();


	const formlogin = reactive({
		username: "",
		password: "",
		x1: "",
		x2: ""
	});

	const active = ref(1);
	const ac = ref(true);
	const text = {
		left: "不妨放慢脚步，感受当下生活的美好，让心灵与生活同步呼吸，毕竟，生活不只是为了向前冲，更是为了感受每一个停留的瞬间，这样的你才能在未来的日子里，更有力量地奔跑。每一次摸鱼都是对生活的一次温柔对待，是对抗焦虑的一剂良药，所以今天你摸鱼了吗？",
		right: "摸鱼不是逃避，而是一种生活的艺术，是在喧嚣与快节奏中找到自己的节奏，享受生命中每一个轻松愉快的瞬间。摸鱼，不是不努力，而是在盲目之余，给自己一个深呼吸的空间，它教会我们，即使面对再大的压力，也要学会在潮起潮落中找到心灵的平衡。",
	};

	const images = [
		imgUrl1,
		imgUrl2,
		imgUrl3
	];
	// 3. 用于存储当前显示的图片索引
	const currentImageIndex = ref(0);
	// 4. 用于存储当前显示的图片 URL (响应式)
	const currentImage = ref(images[currentImageIndex.value]); // 初始值为第一张图

	// 5. 用于存储定时器 ID
	let intervalId = null; // 最好初始化为 null

	// 6. 切换图片的函数
	function changeImage() {
		// 计算下一个索引，使用 % 运算符实现循环
		const nextIndex = (currentImageIndex.value + 1) % images.length;
		// 更新当前索引的 ref
		currentImageIndex.value = nextIndex;
		// 更新当前图片 URL 的 ref，这将触发模板更新
		currentImage.value = images[currentImageIndex.value];
		// console.log(`Changing image to index: ${currentImageIndex.value}, URL: ${currentImage.value}`); // 用于调试
	}



	//验证码计时
	const countdownSeconds = ref(0); // Remaining seconds for cooldown
	let codeTimerId = null; // Timer ID for countdown

	function startCountdown() {
		if (codeTimerId) clearInterval(codeTimerId); // Clear any existing timer
		countdownSeconds.value = 60; // Start from 60 seconds
		codeTimerId = setInterval(() => {
			countdownSeconds.value--;
			if (countdownSeconds.value <= 0) {
				clearInterval(codeTimerId);
				codeTimerId = null; // Reset timer ID
			}
		}, 1000); // Update every second
	}


	function login() {
		if (formlogin.x1 != "" || formlogin.x2 != "") {
			return;
		}
		const data = {
			id: null,
			username: formlogin.username,
			password: formlogin.password
		};
		console.log('Sending data:', data);
		if (formlogin.username != "" || formlogin.password != "") {
			const res = axios.post("/api/admin/login",
				data, {
					headers: {
						'Content-Type': 'application/json' // 设置请求头为表单编码
					}
				});

			res
				.then(response => {
					console.log(response.data);
					if (response.data.code == 200) {
						localStorage.setItem("wushang", JSON.stringify(response.data.data));
						router.replace('/navigation');
					} else {
						console.log(' 登录失败:', response.data.message);
					}
				})
				.catch(error => {
					// 请求失败，处理错误
					if (error.response) {
						// 请求已发送，但服务器响应的状态码不在 2xx 范围内
						console.log('响应状态码:', error.response.status);
						console.log('响应数据:', error.response.data);
					} else if (error.request) {
						// 请求已发送，但没有收到响应
						console.log('没有收到响应:', error.request);
					} else {
						// 在设置请求时发生错误
						console.log('错误信息:', error.message);
					}
				});

		}
	};

	function pianren() {
		startCountdown();
	}

	function xia() {
		alert("恼羞成怒了吧");
	}

	function sign() {
		alert("骗你的没有注册，竟然找到了这，就此止步吧！");
	};

	onMounted(() => {
		// 确保图片数量大于1才启动定时器
		if (images.length > 1) {
			intervalId = setInterval(changeImage, 5000); // 每 5 秒切换一次
		}
	});

	// 8. 组件卸载时清除定时器
	onUnmounted(() => {
		if (intervalId) {
			clearInterval(intervalId);
		}
		// Clear verification code countdown timer
		if (codeTimerId) {
			clearInterval(codeTimerId);
		}

	});
</script>

<style lang="scss" scoped>
	* {
		margin: 0;
		padding: 0;
	}

	.login-container {
		width: 100%;
		min-height: 100vh;
		display: flex;
		justify-content: center;
		align-items: center;
		// background-color: aliceblue;
		background-repeat: no-repeat;
		background-size: cover;
		// background-attachment: scroll;

		.slider {
			// width: 100%;
			position: relative;
			display: flex;
			justify-content: center;
			align-items: center;

			.form {
				width: 400px;
				height: 500px;
				background: rgba(17, 25, 40, 0.75);
				background-filter: blur(16px) saturate(0);
				border-radius: 10px;
				border: 1px solid rgba(255, 255, 255, 0.15);
				padding: 40px 60px;
				box-shadow: rgba(50, 50, 93, 0.25) 50px 50px 100px -20px,
					rgba(0, 0, 0, 0.5) 30px 30px 60px -30px,
					rgba(212, 217, 222, 0.35) 2px -2px 6px 0px inset;
				display: flex;
				justify-content: center;
				flex-direction: column;
				align-items: flex-start;
				margin: 0 10px;
				z-index: 3;
				transition: 0.5s ease-in-out;

				&.hidden {
					height: 395px;
					box-shadow: none;
					z-index: 1;
				}

				.title {
					font-size: 18px;
					color: rgb(246, 240, 255);
					letter-spacing: 1px;
					font-weight: 300;
				}

				.subtitle {
					font-size: 11px;
					color: rgb(246, 240, 255);
					letter-spacing: 1px;
					margin-bottom: 35px;
				}

				.login-way {
					width: 100%;
					height: 100%;
					display: flex;
					justify-content: center;
					flex-direction: column;
					align-items: flex-start;

					p {
						// width: 100px;
						// height: 25px;
						margin: -20px 0 10px 0;
						color: #ffffff;
						cursor: pointer;
						transition: 1s ease-in-out;
					}

					p:hover {
						color: #aaffff;
					}
				}

				.inputf {
					width: 100%;
					position: relative;
					margin-bottom: 35px;
					transition: 1s ease-in-out;

					input {
						width: 100%;
						height: 35px;
						border: none;
						outline: 1.5px solid rgb(200, 200, 220);
						background: transparent;
						border-radius: 8px;
						font-size: 12px;
						padding: 0 15px;
						color: rgb(246, 249, 255);

						&::placeholder {
							color: rgb(175, 180, 190);
						}

						&:focus {
							outline: 1.5px solid rgb(224, 229, 240);

							&::placeholder {
								opacity: 0;
							}

							&+.label {
								opacity: 1;
								top: -20px;
							}
						}

						&:not(:placeholder-shown)+.label {
							opacity: 1;
							top: -20px;
							// border: #fff 1px solid;
						}
					}

					.label {
						position: absolute;
						top: 0;
						left: 0;
						color: rgb(246, 249, 255);
						font-size: 11px;
						font-weight: bold;
						transition: 0.25s ease-out;
						opacity: 0;
					}
				}

				.code {
					display: flex;

					input {
						width: 58%;
						transition: 1s ease-in-out;
					}

					button {
						width: 40%;
						// height: 100%;
						background-color: #49515e;
						margin-left: auto;
						transition: 1s ease-in-out;
					}

					button:hover {
						border: 1px #aaffff solid;
						color: #aaffff;
					}
				}

				button {
					width: 100%;
					height: 35px;
					background: rgb(36, 217, 127);
					color: #ffffff;
					border: none;
					outline: none;
					border-radius: 5px;
					font-weight: bold;
					font-size: 12px;
					cursor: pointer;
				}
			}

			.card {
				position: absolute;
				right: 0;
				top: 50%;
				transform: translate(0, -50%);
				width: 430px;
				height: 400px;
				background-color: #ffffff;
				padding: 40px;
				border-radius: 0 10px 10px 0;
				transition: 0.5s ease-in-out;
				z-index: 2;
				text-align: right;

				&.active {
					right: calc(100% - 430px);
					border-radius: 10px 0 0 10px;
					text-align: left;
				}

				.head {
					font-size: 42px;
					margin-bottom: 35px;

					.name {
						font-weight: 300;

						span {
							color: rgb(36, 217, 127);
							font-weight: bold;

						}
					}

				}

				.desc {
					font-size: 16px;
					text-align: justify;
					margin-bottom: 35px;

				}

				.btn {
					font-size: 14px;

					button {
						background: rgb(36, 217, 127);
						font-size: 14px;
						padding: 5px 15px;
						border: none;
						outline: none;
						border-radius: 5px;
						cursor: pointer;
					}
				}
			}

		}
	}
</style>